<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="tips-box">
				备注：设置设备剩余可使用时长，单位：小时
			</view>
			<view class="table-box">
				<block v-for="(item,index) in deviceList" :key='index'>
					<view class="table-item">
						<view class="table flexWarpCenterColumn">
							<view class="billiards-num">{{item.equipmentName}}</view>
						</view>
						<view class="info-input">
							<view class="info-item flexWrapNo" v-for="(val,k) in item.partsList" :key="k">
								<view>{{val.partsName}}：</view>
								<input placeholder="请输入"
									type="number"
									placeholder-class="placeholderclass" 
									v-model="val.remainTime" 
								/>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view class="bottom-box flexWrapNo">
				<view class="define-btn" @tap="submit">提交保存</view>
			</view>
		</template>
	</view>
</template>

<script>
	import utils from '@/common/lib/util.js'
	export default{
		data(){
			return{
				pageOpc:0,
				deviceList:[],
			}
		},
		onReady() {
			setTimeout(() => {
				this.pageOpc = 1
			}, 100)
		},
		onLoad(){
			this.getList()
		},
		methods:{
			// 获取设备
			getList(){
				this.$tools.loadIng()
				this.$request.post(this.$api.devicePartsList, {
					storeId:uni.getStorageSync('store_id')
				}, {
					isJava:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==200) {
						this.deviceList=data
					}
				}).finally(() => {
					setTimeout(() => {
						this.$tools.hideLoading()
					}, 1000)
				})
			},
			
			// 提交
			submit:utils.debounce(function(){
				let arr=[]
				console.log(this.deviceList)
				this.deviceList.forEach(item=>{
					item.partsList.forEach(val=>{
						arr.push({
							id:val.id,
							time:val.remainTime,
							partsId:val.partsId,
							storeId:val.storeId,
							equipmentId:item.equipmentId,
						})
					})	
				})
				// console.log(arr)
				// for(let i=0;i<arr.length;i++){
				// 	if(arr[i].time>700){
				// 		this.$tools.showToast("剩余可使用时长不得超过上线配置时长700")
				// 		return
				// 	}
				// }
				this.$request.post(this.$api.deviceInitialize, {
					partsList:arr
				}, {
					isJava:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==200) {
						this.$tools.showToast('提交成功')
						setTimeout(()=>{
							uni.navigateBack()
						},800)
					}
				})
			},1000),
			
		},
	}
</script>

<style lang="scss" scoped>
	.tips-box{
		font-size: 28rpx;
		color: rgba(255,255,255,0.6);
		background: #040336;
		padding: 28rpx;
		position: sticky;
		top:0;
		z-index:22;
	}
	.table-box{
		padding:0 28rpx 160rpx 28rpx;
		.table-item{
			margin-bottom:48rpx;
			&:not(:last-child){
				border-bottom:1rpx solid rgba(255,255,255,0.2);
			}
			.table{
				width: 220upx;
				height: 162upx;
				justify-content: center;
				background: url('@/static/index/idle.png') no-repeat center/100% 100%;
				flex:none;
				.billiards-num{
					font-size: 30rpx;
					font-weight: bold;
					line-height: 50upx;
					color: #FFFFFF;
					text-shadow: 0px 2px 6upx rgba(0,0,0,0.65);
				}
			}
			
			/deep/.info-input{
				.info-item {
					font-size: 28upx;
					font-weight: 400;
					line-height: 40upx;
					color: #FFFFFF;
					padding: 30rpx 0;
					&:not(:last-child){
						border-bottom: 1upx solid rgba(255,255,255,0.05);
					}
					input {
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFE577;
						flex: 1;
					}	
					.placeholderclass {
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFE577;
					}
				}
			}
			
		}
		.mj{
			.table{
				width: 220upx;
				height: 182upx;
				// background: url('@/static/index/mj-idle.png') no-repeat center/100% 100%;
			}
		}
		.busy{
			.table{
				background: url('@/static/index/busy.png') no-repeat center/100% 100%;
			}
			.billiards-status{
				border: 2px solid #FFB726 !important;
				color: #FFB726 !important;
			}
		}
		.mjbusy{
			.table{
				// background: url('@/static/index/mj-busy.png') no-repeat center/100% 100%;
			}
			.billiards-status{
				border: 2px solid #FFB726 !important;
				color: #FFB726 !important;
			}
		}
		.repair{
			.table{
				background: url('@/static/index/repair.png') no-repeat center/100% 100%;
			}
			.billiards-status{
				border: 2px solid #969696 !important;
				color: #969696 !important;
			}
		}
		.mjrepair{
			.table{
				// background: url('@/static/index/mj-repair.png') no-repeat center/100% 100%;
			}
			.billiards-status{
				border: 2px solid #969696 !important;
				color: #969696 !important;
			}
		}
	}
	
	.bottom-box{
		width: 100%;
		padding-top: 14rpx;
		padding-bottom: 62rpx;
		background:#040336;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		justify-content: center;
		z-index:11;
		.define-btn{
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			width: 686rpx;
			height: 96rpx;
			line-height: 96rpx;
			background: linear-gradient( 90deg, #598FFF 0%, #2662DE 100%);
			border-radius: 48rpx;
			text-align: center;
		}
	}
</style>